<template>
  <div class="productionDesign_box myStyle">
    <div id="tags-view-container" class="tags-view-container">
      <div class="tags-view-wrapper">
        <router-link ref="tag" tag="span" class="tags-view-item active" :to="{ path: '/' }">
          电力仪表监控详情
          <span class="el-icon-close" @click="$router.push('/index')" />
        </router-link>
      </div>
    </div>
    <div class="content">
      <div class="content_small">
        <StrokeTitle2 title="标值监控" class="float margin" style="width: 99%" :isCenter='true'>
          <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList" slot="select" />
          <div class="bzjk_box flex_between" slot="content">
            <div class="bzjk_item backgroung flex_between">
              <div class="bzjk_item_left">
                <div class="bzjk_item_number">
                  {{ $formatNum((top1[0])) }}
                </div>
                <div class="bzjk_item_center">
                  <div class="border"></div>
                </div>
                <div class="bzjk_item_title">
                  总表实时电压
                </div>
              </div>
              <img :src="bzjkImgList[0]" alt="">
            </div>
            <img src="@/assets/images/echarts/zu2.png" alt="" class="and">
            <div class="bzjk_item backgroung flex_between">
              <div class="bzjk_item_left">
                <div class="bzjk_item_number">
                  {{ $formatNum(top1[1]) }}
                </div>
                <div class="bzjk_item_center">
                  <div class="border"></div>
                </div>
                <div class="bzjk_item_title">
                  总表实时电流
                </div>
              </div>
              <img :src="bzjkImgList[1]" alt="">
            </div>
            <img src="@/assets/images/echarts/zu2.png" alt="" class="and">
            <div class="bzjk_item backgroung flex_between">
              <div class="bzjk_item_left">
                <div class="bzjk_item_number">
                  {{ $formatNum(top1[2]) }}
                </div>
                <div class="bzjk_item_center">
                  <div class="border"></div>
                </div>
                <div class="bzjk_item_title">
                  总表实时温度
                </div>
              </div>
              <img :src="bzjkImgList[2]" alt="">
            </div>

          </div>
        </StrokeTitle2>
      </div>

      <div class="content_small">
        <StrokeTitle2 title="电压监控" class="float margin" style="width: 99%" :isBetween="true">
          <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList" slot="select" />
          <Gauge2 :data="item" v-for="(item,index) in center1" :key="index" slot="content" />
        </StrokeTitle2>
      </div>
      <div class="content_small">
        <StrokeTitle2 title="电压监控" class="float margin" style="width: 99%" :isBetween="true">
          <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList" slot="select" />
          <Gauge2 :data="item" v-for="(item,index) in center1" :key="index" slot="content" />
        </StrokeTitle2>
      </div>
      <div class="content_big">
        <StrokeTitle2 title="异常统计" class="float margin" style="width: 99%" :isCenter="true">
          <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList" slot="select" />
          <div class="yctj_item" slot="content">
            <StrokeOrnament title="电压异常统计" style="margin:8px 0 5px 0;"></StrokeOrnament>
            <div class="flex_center">
              <ElementRadio v-model="model" :isButton="true" @change="radioChange" />
            </div>
            <div class="flex_center Echarts">
              <XRow class="cntjEcharts" barWidth="6" :data="bottom1" barRight="19%" xUnit="单位：箱"></XRow>
            </div>
          </div>
          <div class="backBor" slot="content"></div>
          <div class="yctj_item" slot="content">
            <StrokeOrnament title="电压异常统计" style="margin:8px 0 5px 0;"></StrokeOrnament>
            <div class="flex_center">
              <ElementRadio v-model="model" :isButton="true" @change="radioChange" />
            </div>
            <div class="flex_center Echarts">
              <MoreDirection :data="bottom2" :isCategory="false" :legendData="['已完成']" :isUnit="false" :xAxisLineShow="true" :yAxisLineShow="true" bar1Color="rgba(248, 255, 59,0.8)" />
            </div>
          </div>
          <div class="backBor" slot="content"></div>
          <div class="yctj_item" slot="content">
            <StrokeOrnament title="电压异常统计" style="margin:8px 0 5px 0;"></StrokeOrnament>
            <div class="flex_center">
              <ElementRadio v-model="model" :isButton="true" @change="radioChange" />
            </div>
            <div class="flex_center Echarts">
              <XRow class="cntjEcharts" barWidth="6" :data="bottom3" barRight="14%" barLeft="10%" xUnit="箱"></XRow>
            </div>
          </div>

        </StrokeTitle2>

      </div>
    </div>
  </div>
</template>

<script>
import TwoRow from "@/components/echarts/bar/twoRow.vue";
import Gauge2 from "@/components/echarts/pie/gauge2.vue"; //仪表盘
import StrokeTitle2 from "@/components/myComponents/stroke/title2.vue";
export default {
  components: {
    TwoRow,
    Gauge2,
    StrokeTitle2,
  },
  data() {
    return {
      model: "month",
      selectList: [
        { value: "", label: "全部" },
        { value: "1", label: "选项一" },
      ],
      top1: [2345, 65432, 65432],
      center1: [
        { name: "设备一", value: 20 },
        { name: "设备一", value: 20 },
        { name: "设备一", value: 20 },
        { name: "设备一", value: 20 },
        { name: "设备一", value: 20 },
      ],
      center2: [
        { name: "设备一", value: 20 },
        { name: "设备一", value: 20 },
        { name: "设备一", value: 20 },
        { name: "设备一", value: 20 },
        { name: "设备一", value: 20 },
      ],
      bottom1: [
        { name: "产品一", value: 123 },
        { name: "产品二", value: 221 },
        { name: "产品三", value: 123 },
        { name: "产品四", value: 124 },
        { name: "产品五", value: 124 },
      ],
      bottom2: [
        { name: "设备一", value1: 123 },
        { name: "设备二", value1: 221 },
        { name: "设备三", value1: 123 },
        { name: "设备四", value1: 124 },
        { name: "设备五", value1: 124 },
      ],
      bottom3: [
        { name: "产品一", value: 123 },
        { name: "产品二", value: 221 },
        { name: "产品三", value: 123 },
        { name: "产品四", value: 124 },
        { name: "产品五", value: 124 },
      ],
      color: ["blue", "orange", "green", "pink"],
      bzjkImgList: [
        require("@/assets/images/echarts/dianyalan.png"),
        require("@/assets/images/echarts/dianliulan.png"),
        require("@/assets/images/echarts/wendulan.png"),
      ],
    };
  },
  methods: {
    radioChange() {},
  },
};
</script>


<style lang="scss" scoped>
.productionDesign_box {
  .content {
    .content_small,
    .content_big {
      //   background: red;
      width: 100%;
      height: 19.7%;
    }
    .content_big {
      height: 31.3%;
    }
    .bzjk_box {
      width: 100%;
      height: 100%;
      padding: 15px 7%;
      max-height: 140px;
      .bzjk_item {
        width: 22.5%;
        background: linear-gradient(
          180deg,
          rgba(44, 119, 187, 0.5) 0%,
          rgba(18, 81, 141, 0.5) 100%
        );
        border: 1px solid #2489ee71;
        height: 100%;
        padding: 12px 30px;
        position: relative;
        .bzjk_item_left {
          width: 70%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          //  background: red;
          .bzjk_item_number {
            font-size: 30px;
            color: #ffffff;
          }
          .bzjk_item_center {
            width: 70%;
            height: 1px;
            background: rgba(52, 134, 218, 0.3);
            .border {
              width: 50px;
              height: 2px;
              background: rgba(52, 134, 218, 1);
            }
          }
          .bzjk_item_title {
            font-size: 15px;
            color: #ffffff;
          }
        }
        img {
          width: 60px;
          position: absolute;
          right: 25px;
          bottom: 12px;
        }
      }
    }
    .yctj_item {
      width: 32%;
      height: 100%;
      // background: red;
    }
    .Echarts {
      height: calc(100% - 80px);
      width: 100%;
    }
  }
}
</style>